<template>
    <view class="uni-shadow" @tap.stop="detail">
        <u-row class="u-flex u-flex-wrap">
            <u-col v-for="(item,index) in list" :key="index" 
                :span="item.span" 
                :class="['u-font-26','col',index==0?'u-m-b-10':'u-m-t-20']">
                <text :class="['u-m-r-20','u-line-1',index==0?'u-font-28 font-bold':'uni-dec-color']">{{item.title}}</text>
                <uni-phone v-if="item.type=='phone'" :phone="item.value" size="13"/>
                <text v-else class="u-line-1" style="max-width:80%" @longtap="longTap(item.value)">{{item.value}}</text>
            </u-col>
        </u-row>

        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
    </view>
</template>


<script>
export default {
    name: 'teamItem',
    props: {
        listItem: {
            type: Object,
            default () {
                return {}
            }
        }
    },

    data(){
        return{
            list:[
                { field:'bzmc', span:12, title:'班组名称', value:'' },
                { field:'deptName', span:12, title:'所属单位', value:'' },
                { field:'gcmc', span:12, title:'所属项目', value:'' },
                { field:'bzzxm', span:6, title:'班组长', value:'' },
                { field:'bzzlxdh', span:6, title:'联系电话', value:'', type:'phone' },
                { field:'cyrs', span:6, title:'班组人数', value: '' },
            ]
        }
    },

    created() {
        this.list.map((v,i)=>{
            for(let key in this.listItem){
                if( v.field == key ){
                    if( v.field == 'bzmc' ){
                        v.title = this.listItem[key]?this.listItem[key]:'暂无数据源'
                    }else{
                        v.value = this.listItem[key]?this.listItem[key]:'暂无数据源'
                    }
                }
            }
        })
    },

    methods: {
        // 长按事件
        longTap(value){
            this.$refs.uToast.show({
                message: value,
                type: 'default',
                duration: 3000
            })
        },
        // 详情
        detail(){
            uni.navigateTo({
                url: '/pages/team-bag/detail?id='+this.listItem.id
            })
        }
    },
}
</script>


<style scoped lang="scss">
    .col{
        flex-direction: row;
    }
</style>